<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<style>
	#title{
	border-left: 0.2em solid #00397c;
	font-family: "Microsoft YaHei", "Hiragino Sans GB", Arial-normal, "open sans", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;color: #00397c;
	}
	ul li {list-style: none;display: inline-block;text-align: center;color: #FFFFFF;font-size: 16px;padding: 0; float:left;width:30%}
	#xsdlxx1,#xsdlxx {width: 100%;text-align: center;margin-top:0}
    u {text-decoration: none;}
    div ul li div u {font-size: 18px;}
	.data-info {font-size: 19px;font-weight: bold;}
	.p-title {color: #FFFFFF;font-size: 16px;font-weight: bold;padding: 1% 0px 1% 3%;}
	#card-infor {width: 100%;height: 90%;position: relative;}
	#card1,#card2,#card3 {width: 100%;height: 3%;border-radius: 10px;position: relative;margin: 7px auto;}
	#xsyc-data li,#tqyc-data li {width: 40%;}
	.warn {color: #fd4200;}
    a {text-decoration: none;color: #FFFFFF;font-size: 12px;}
    a:hover {cursor: pointer;}
	#lxgd tr td {color: #ff4301;}th {font-weight: normal;background-color: #0067b4;border-right: 1px solid #0067b4;color: #FFFFFF;width: 24%;}
	</style>
	<body style="width:100%;height:98%;background:#F0F0F0;">
	<div id="main" style="width:99%;height: 98%;position: absolute;top: 0%;left: 0%;">
	    <div id="left-space" style="width:1%;height:100%;float: left;"></div>
		<div id="left" style="width:69%;height:100%;float: left;">
		 <div id="left-one" style="width:100%;height:50%;float: right;background:white;">
			<div id="left-content" style="width:100%;height:10%;float: right;">
			<label id="title">&nbsp;&nbsp;汉东省</label>
			</div>
			<div id="left-content" style="width:100%;height:90%;float:left;background:white;">
				<div id="left-content1" style="float:left;width:20%;height:100%;">
				内容1
				</div>
				<div id="left-content2" style="position: relative;width:50%;height:100%;float:left;">
				内容2
				</div>
				<div id="left-content3" style="position: relative;width:30%;height:100%;float:left;">
				内容3
				</div>
			</div>
			<div if="right-space" style="width:100%;height:2%;float: right;background:#F0F0F0;"></div>
			</div>
			<div id="right-space" style="width:100%;height:2%;float: right;background:#F0F0F0;"></div>
			 <div id="left-two" style="width:100%;height:48%;float: left;">
                <div id="left-content4" style="float:left;width:100%;height:5%;background:white;">
				<label id="title">&nbsp;&nbsp;彩票数据</label>
				</div>
			    <div id="card-infor" style="float:left;width:40%;height:95%;background:white;">
				   <div id="card1" style="float:left;width:100%;height:30%;background:#555DFD;">
					<p class="p-title">亏损信息</p>
					<div id="xsdlxx">
					<ul id="xsdlxx-data">
											<li>
												<div id="xs">
													<label id="xsl" class="data-info">3.83</label>
													<a href="#">%</a>
													<br> <u>亏损率</u>
												</div>
											</li>
											<li>
												<div id="xs">
													<label id="gdl" class="data-info">0.91</label>
													<a href="#">亿元</a>
													<br> <u>购买数</u>
												</div>
											</li>
											<li>
												<div id="xs">
													<label id="sdl" class="data-info">0.87</label>
													<a href="#">亿元</a>
													<br> <u>中奖数</u>
												</div>
											</li>
										</ul>
					</div>
					</div>
					<div id="card2" style="float:left;width:100%;height:30%;background:#569FFE;">
					<p class="p-title">亏损数</p>
					<div id="xsyc">
					<ul id="xsyc-data">
											<li>
												<div id="xlycyc">
													<label id="xsl" class="data-info warn">3.83</label>
													<a href="#">数</a>
													<br> <u>异常</u>
												</div>
											</li>
											<li>
												<div id="xlyczc">
													<label id="gdl" class="data-info">0.91</label>
													<a href="#">数</a>
													<br> <u>正常</u>
												</div>
											</li>
										</ul>
					</div>
					</div>
					<div id="card2" style="float:left;width:100%;height:30%;background:#018963;">
					<p class="p-title">全省亏损数</p>
					<div id="tqyc">
					<ul id="tqyc-data">
											<li>
												<div id="tqycyc">
													<label id="xsl" class="data-info warn">3.83</label>
													<a href="#">数</a>
													<br> <u>异常</u>
												</div>
											</li>
											<li>
												<div id="tqyczc">
													<label id="gdl" class="data-info">0.91</label>
													<a href="#">数</a>
													<br> <u>正常</u>
												</div>
											</li>
										</ul>
					</div>
					</div>
				</div>
				<div id="left-xsEchart" style="position: relative;width:60%;height:95%;float:left;background:white;">
				内容2
				</div>
			</div>
		</div>
		<div id="right" style="width:29%;height:100%;float: right;background:red;">
		  <div id="right-one" style="width:100%;height:50%;float:right;background:white;">
		        <div id="right-content" style="float:left;width:100%;height:10%;">
				<label id="title">&nbsp;&nbsp;工单数据</label>
				</div>
		        <div id="right-content1" style="float:left;width:100%;height:40%;background:white;">
				 <table id="lxgd" style="background:#0067b4;height:12%;width:100%;align:center;font-size:12;font-weight: normal">
				   <thead>
								<th>工单类型</th>
								<th>总数</th>
								<th>未处理</th>
								<th>处理率</th>
				   </thead>
				 <tr>
				   <td>
				   </td>
				 </tr>
				 </table>
				</div>
				<div id="right-content2" style="position: relative;width:100%;height:50%;float:left;background:white;">
				内容2
				</div>
		</div>
		<div if="right-space" style="width:100%;height:2%;float: right;background:#F0F0F0;"></div>
		  <div if="right-two" style="width:100%;height:48%;float: right;background:white;">
		       <div  style="float:left;width:100%;height:10%;">
				<label id="title">&nbsp;&nbsp;指标数据</label>
				</div>
		        <div id="right-gjzbEchart" style="float:left;width:100%;height:90%;">
				内容1
				</div>
		</div>
		</div>
	</div>
	</body>
	   <script src="../js/echarts.js"></script>
	    <script src="../js/demo.js"></script>
		<script src="../js/gjzb.js"></script>
		<script src="../js/xjgds.js"></script>
	<script type="text/javascript">
		function newTab(text, url) {
			openPage({
				text: text,
				link: url,
				target: "tab"
			});
			window.location.reload(true);
		}
	var zx_Chart = echarts.init(document.getElementById("left-xsEchart"));
	  option = {
    title : {
        text: ' 亏损率（%）'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['亏损率','亏损合格率','合格率']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'亏损率',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'合格率',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        },
        {
            name:'合格率',
            type:'line',
            data:[3, -2, 5, 0, 6, 0, 4],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
  zx_Chart.setOption(option);            
	</script>
</html>